<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <link href="../css/qs.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/dragdrop.css" rel="stylesheet" type="text/css" />
    <link href="uidemo.css" rel="stylesheet" type="text/css" />
    <style>
        h2{padding:10px 0;margin-bottom:10px;border-bottom:1px solid #000;}
        .drag-trigger{cursor:pointer;width:8px;border:1px solid #000;background:#999;height:14px;position:absolute;top:-5px;}
    </style>
</head>
<body style="height:1000px">
<div style="position:absolute;left:50px;top:50px">


    <h2>Simple drag / drop</h2>
    <div id="dragtest1" style="background:#f60;position:absolute;">Drag me</div>
    <div id="droptest1" style="background:gray;height:100px;width:100px;left:200px;position:relative;">Drop Here</div>
    
    <br/><br/><br/><br/><br/><br/>

    <h2>Drag with containment</h2>
    <div style="border:1px solid #999;background:white;height:200px;width:600px;position:relative;">
        <div id="dragtest2" style="background:#f60;height:50px;width:50px;position:absolute;">Drag</div>
    </div>  
    
    <br/><br/><br/><br/><br/><br/>

    <h2>Simple slider</h2>
    <div id="sildertest" style="width:200px;border:1px solid #666;height:6px;position:relative;">
        <a class="drag-trigger" style="">A</a>
        <a class="drag-trigger" style="right:0;">B</a>
    </div>

</div>

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../js/ui/dragdrop.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    // simple drag / drop
    var drag = new Util.Dragable($('#dragtest1'), null, {group:'g1'});
    var drop = new Util.Dropable($('#droptest1'), {
        onEnter: function(){
            drop.el.css({
                backgroundColor: 'red'
            })
        },
        onDrop: function(){
            drop.el.html('Droped')
        },
        onOut: function(){
            drop.el.css({
                backgroundColor: 'gray'
            })
        }
    }, {group:'g1'});
    
    //with containment
    var dragCtm = new Util.Dragable($('#dragtest2'), {
        onDragStart:function(e, proxy){
        },
        onDrag: function(e, proxy){
        },
        onDragEnd: function(e, proxy){
            proxy.show();
        }
    }, {
        autoProxy: false,
        proxy: $('#dragtest2'),
        delay: 10,
        direction: 'xy',
        containment: [0, 0, 550, 150]
    });
    
    //slider
    var barEl = $('#sildertest');
    var dragEl = $('#sildertest .drag-trigger');
    var scrollLeft = 0;
    var triggerWidth = 10;
    var parentLeft = barEl.offset().left;
    var rightEdge = barEl.width() - triggerWidth;
    var leftEdge = 0;
    var drag1 = new Util.Dragable(dragEl.eq(0), {
        onDragStart:function(e, proxy){
            drag1.setContainment(leftEdge, 0, dragEl.eq(1).position().left - triggerWidth, 0);
        },
        onDrag: function(e, proxy){
        },
        onDragEnd: function(e, proxy){
            proxy.show();
        }
    }, {
        autoProxy: false,
        proxy: dragEl.eq(0),
        delay: 10,
        direction: 'x'
    });
    var drag2 = new Util.Dragable(dragEl.eq(1), {
        onDragStart:function(e, proxy){
            drag2.setContainment(dragEl.eq(0).position().left + triggerWidth, 0, rightEdge, 0);
        },
        onDrag: function(e, proxy){
        },
        onDragEnd: function(e, proxy){
            proxy.show();
        }
    }, {
        autoProxy: false,
        proxy: dragEl.eq(1),
        delay: 10,
        direction: 'x'
    });
</script>
</body>
</html>
